<template>
	<view class="zy-row-top zy-mh-lg zy-mt-lg">
		<image class="zy-img-sm-circle" :src="item.headPicUrl"></image>
		<view class="zy-column zy-ml zy-flex" style="width: 0;">
			<view class="zy-row">
				<view class="zy-row">
					<view class="zy-btn-purple-sm zy-text-white-sm" v-if="index==0">沙发</view>
					<view class="zy-text-white-sm" style="background: #F19C0B; border-radius: 5rpx; padding: 5rpx 10rpx;" v-if="index!=0">板凳</view>
				</view>
				<view class="zy-text-whitegrey-lg zy-ml">{{item.nick}}</view>
			</view>
			<view class="zy-text-white zy-mt-sm"> {{item.content}} </view>
			<view class="zy-row zy-mt-sm">
				<view class="zy-text-whitegrey-sm">{{item.createTime}}</view>
				<view class="zy-row zy-ml" v-if="isComment">
					<view class="zy-text-main-sm" @click="onReply">回复</view>
					<view class="zy-text-main-sm zy-ml" @click="onExpand" v-if="item.children">{{expandText}}</view>
				</view>
			</view>
			<slot v-if="item.expand"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"comment-item",
		data() {
			return {
				expandText:'展开',
			};
		},
		props:{
			item:{
				type:Object,
				default:()=>{}
			},
			index:{
				type: Number,
				default:()=>-1
			},
			isComment:{
				type: Boolean,
				default:()=>true
			}
		},
		methods:{
			onExpand(){
				this.item.expand = !this.item.expand
				this.expandText = this.item.expand? '收起': '展开'
			},
			onReply(item){
				this.$emit('reply', this.item)
			}
		}
	}
</script>

<style>

</style>